<template>
  <div>
    <div id="middle-container">
      <div class="middleContainer">
        <div class="middleContainer-title">
          <digital-flop />
        </div>
        <div class="container">
          <div style="margin-top:5px">
            <showTable />
          </div>
          <div style="margin-top:15px">
            <div style="width:100%;margin-top:10px" @click="gotoDetail">
              <scrollBoard />
            </div>

          </div>
        </div>
      </div>
    </div>
    <div style="margin-top:10px;display:flex">
      <div class="card-item1">
        <div style="margin-bottom:10px" class="title">五大领域资金占比</div>
        <roseChart :data-list="dataList" />
      </div>
      <div style="margin-left:20px" class="card-item1">
        <div class="title">近六月场景入库项目数量</div>
        <div style="height:200px">
          <VEcharts
            ref="chartClass1"
            autoresize
            :options="leftconfig1"
            class="chartClass"
            style="width:100%;height:90%"
          />
        </div>
      </div>

    </div>

  </div>

</template>
<script>
import digitalFlop from './digitalFlop';
import showTable from './showTable';
// import cards from './cards';
import roseChart from './roseChart';
import VEcharts from '@/components/vecharts';
import scrollBoard from './scrollBoard';
export default {
  components: {
    digitalFlop,
    showTable,
    // cards,
    roseChart,
    VEcharts,
    scrollBoard
  },
  data() {
    return {
      dataList: [],
      leftconfig1: {}
    };
  },
  mounted() {
    this.getconfig();
    // setInterval(() => {
    //   this.getconfig();
    // }, 8000);
  },
  created() {
    const { randomExtend } = this;
    this.dataList = [{ name: '数字社会', value: randomExtend(40, 70) },
      { name: '数字法治', value: randomExtend(20, 30) },
      { name: '数字经济', value: randomExtend(10, 50) },
      { name: '党政机关', value: randomExtend(5, 20) },
      { name: '数字政府', value: randomExtend(5, 20) }
    ];
  },
  methods: {
    gotoDetail() {
      const routeUrl = this.$router.resolve({
        path: '/demoPage',
        query: {
        }
      });
      const tempwindow = window.open('_blank'); // 先打开页面
      tempwindow.location = routeUrl.href; // 后更改页面地址
    },
    getconfig() {
      this.$refs.chartClass1.clear();
      this.leftconfig1 = {};
      this.leftconfig1 = {
        grid: {
          left: '0%',
          top: '8%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },

        series: [{
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }]
      };
    },
    randomExtend(minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10);
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
      }
    }
  }
};
</script>

<style scoped lang='scss' >
 .card-item1 {
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    width: 48%;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    height: calc(100vh - 60vh - 130px );
  }
  .title{
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    font-weight: bolder;
  }
   .middleContainer{
    border: 1px solid #848383;
    height: calc(60vh);
    border-radius: 10px;
   }
   .middleContainer-title{
     margin-top: 10px;
     font-size: 18px;
     font-weight: bolder;
     color: #fff;
     text-align: center
   }
   .leng{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999;
    width: 100px;
    height: 140px;
    opacity: 0.55;
    color: #fff;
    background-color: black;
    text-align: center;
    padding:10px;
    font-size:12px;
   }
   .commonSpan{
     width:12px;
     height:12px;
     display:inline-block;
   }
  .dv-capsule-chart .capsule-item {
    -webkit-box-shadow: 0 0 3px #999;
    box-shadow: 0 0 3px #999;
   height: calc(1.8vh) !important;
    margin: 9px 0px;
    border-radius: 5px;
}
 .dv-capsule-chart .capsule-item .capsule-item-column {
    position: relative;
    height: calc(1.8vh) !important;
    margin-top: 1px;
    border-radius: 5px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.container{
  padding:10px;
  position:relative;
  overflow-y: auto;
  height: calc(65vh - 120px);
}

</style>
